<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 继承
    // 让一个类(构造函数) 继承 另一个类(构造函数) 的属性和方法(实例,原型对象),还可以 定义 追加 自己的属性和方法
    // 继承的类  => 子类
    // 被继承的类 => 父类

    // 继承的目的:  实现代码的复用


    // 原型继承: 

    // 用父类的实例化对象覆盖子类的原型对象 => 从而达到拓宽原型链的目的
    // 缺点: 
    // 1. YellowPerson.prototype 被覆盖  constructor属性没有了  => 自己加
    // 2. 用父类的实例化对象覆盖子类的原型对象  => 出现多余属性
    // 3. 子类只继承了父类的原型对象上的属性和方法 => 没有继承实例的


    function Person(name, age) {
        // this -> 构造函数Person在执行过程中创建的实例化对象
        this.name = name;
        this.age = age;
    }
    Person.prototype.species = "human";
    Person.prototype.say = function () {
        console.log(this.name, this.age);
    }
    Person.prototype.skill = function () {
        console.log("thinking");
    }

    var p = new Person("张三", 18);
    console.log(p);


    function YellowPerson(name, age, hobby) {
        // this -> 构造函数YellowPerson在执行过程中创建的实例化对象
        // Person.call(this, name, age);
        this.hobby = hobby;
    }

    // 为什么 YellowPerson创建的实例化对象 不能Person.prototype ?

    // p的原型链:   p  -> Person.prototype       -> Object.prototype -> null
    // yp的原型链:  yp -> YellowPerson.prototype -> Object.prototype -> null



    // 用父类的实例化对象覆盖子类的原型对象 => 从而达到拓宽原型链的目的
    // 缺点: 
    // 1. YellowPerson.prototype 被覆盖  constructor属性没有了  => 自己加
    // 2. 用父类的实例化对象覆盖子类的原型对象  => 出现多余属性
    // 3. 子类只继承了父类的原型对象上的属性和方法 => 没有继承实例的


    //  YellowPerson.prototype = new Person("张三", 18) = {
    //     name:"张三",  // 多余
    //     age:18,   //多余
    //     speak(){},
    //     [[Prototype]]:Person.prototype
    // }

    // 修改后yp的原型链:  yp -> YellowPerson.prototype(p) -> Person.prototype  -> Object.prototype -> null

    YellowPerson.prototype = new Person("张三", 18);
    YellowPerson.prototype.constructor = YellowPerson;

    YellowPerson.prototype.speak = function () {
        console.log("chinese");
    }


    var yp = new YellowPerson("李四", 24, "唱歌");
    console.log(yp);

    // console.log(yp.species);
    // yp.skill()








</script>

</html>